<template>
    <div class="tags" ref="tag">
        <ul :style="`left:${tagLeft}px`">
            <li
                class="tags-li"
                v-for="(item,index) in tagList"
                @click="switchTag(item.url)"
                :class="{'active fontColor': isActive(item.url), 'closable': index === 0}"
                :key="index"
            >
                
                <span
                    :data-href="item.url"
                >{{item.title}}
                </span>
                <i class="el-icon-close"  v-if="index !== 0" @click.stop="closeTag(index)"></i>
            </li>
        </ul>
        <div class="tags-close-box">
            <el-dropdown>
                <el-button size="mini" type="primary">
                    标签选项
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>

                <el-dropdown-menu size="small" slot="dropdown">
                    <el-dropdown-item @click.native="closeOther">关闭其他</el-dropdown-item>
                    <el-dropdown-item @click.native="closeAll">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!-- <div class="rightBox" v-if="showLRbutton">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="leftMove"></el-button>
                <el-button type="primary" icon="el-icon-arrow-right" size="mini" @click="rightMove"></el-button>
            </el-button-group>
        </div>     -->
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations } = createNamespacedHelpers('tagModule');
export default {
    name: 'Tag',
    data() {
        return {
            tagLeft:0, // 标签左移的位置
            currentIndex: 0, // 标签移动的光标
            showLRbutton:false // 是否显示左右按钮
        };
    },
    computed: {
        ...mapState([
            'tagList',
            'activeTag',
            'tagListSum'
        ]),
    },
    watch:{
        // tagListSum:{
        //     handler(newSum) {
        //         let tagWidth = this.$refs.tag.offsetWidth-120;
        //         if (newSum > tagWidth) {
        //             this.showLRbutton = true;
        //             let diffW = tagWidth - newSum;
        //             this.tagLeft = diffW;
        //         }else{
        //             this.showLRbutton = false;
        //             this.tagLeft =0;
        //         }
        //     }
        // }
    },
    methods: {
        ...mapMutations([
            'switchActiveTag',
            'removeTag'
        ]),
        isActive (url) {
            return url === this.activeTag.url;
        },
        // 关闭单个标签
        closeTag (index, url) {
            this.removeTag({index:index,url:url});
        },
        closeAll () {
            this.removeTag({ closeAll: true });
            this.switchActiveTag('index');
        },
        closeOther () {
            this.removeTag({ closeOther: true });
        },
        // 切换标签
        switchTag (url) {
            this.switchActiveTag(url);
        },
        // 向左移动
        leftMove(){
            let tagLeft = this.tagLeft + 100;
            if(tagLeft>0){
                tagLeft = 0;
                this.currentIndex ++;
            }else if(tagLeft < 0){
                this.currentIndex ++;
            }
            this.tagLeft = tagLeft; 
        },
        // 向右移动
        rightMove(){
            let tagWidth = this.$refs.tag.offsetWidth-120;
            if(this.tagListSum < tagWidth-this.tagLeft){
                return;
            }
            let tagLeft = this.tagLeft -100;
            this.tagLeft = tagLeft;
        }
    }
};
</script>


<style scoped>
.tags {
    /* position: relative; */
    overflow: hidden;
    padding-right: 120px;
    /* box-shadow: 0 5px 10px #ddd; */
    color: #fff;
    height: 100%;
    box-shadow: none!important;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}

.tags ul {
    box-sizing: border-box;
    /* width: 100%; */
    height: 100%;
    position: absolute;

}

.tags-li {
    display: inline-block;
    margin: 3px 5px 2px 3px;
    border-radius: 3px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
    height: 23px;
    line-height: 23px;
    border: 1px solid #e9eaec;
    padding: 0 5px 0 12px;
    vertical-align: middle;
    color: #666;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    background: #fff;
}

.tags-li.closable {
    padding: 0 12px 0 12px;
}

.tags-li:not(.active):hover {
    background: #f8f8f8;
}

.tags-li-title {
    float: left;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
    color: #666;
}

.tags-close-box {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding-top: 1px;
    text-align: center;
    width: 110px;
    height: 30px;
    background: #fff;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.tags .rightBox{
    position: absolute;
    right: 0px;
    top: 1px;
    width: 120px;
    background: #fff;
    z-index: 1;
}
.tags  .el-button-group{
    margin-left: 20px;
}
</style>
